<template>
    <div class="main main_bg" :style="$store.state.isApp?'paddingTop:.2rem':'paddingTop:1.2rem'">
      <gltitle :titleSize="titleSize" :is_mt="is_mt" v-if="!$store.state.isApp" @handleParentFn="handleParentFn" :is_holdBack="true"></gltitle>
      <div class="container"  v-if="isHasList">

        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="$t('load.no_more')"
          :loading-text="$t('load.loading')"
          @load="onLoad"
          v-show="!emptyShow"
          :offset="5"
          class="listContent"

        >
          <div class="item boxshadow" v-for="(item,k) in datainfo" :key="k" @click="handleChangeChildTeam(item)">
          <div class="head db">
            <div class="photo"><img :src="item.avatar" alt="" v-if="item.avatar != ''"></div>
            <div class="flex">
              <div class="id">{{item.account}} <span>(ID：{{item.userId}})</span></div>
              <div class="time c-999">{{item.registerTime}}</div>
            </div>
          </div>
          <ul>

            <li class="db">
              <div class="name">{{$t('doc.doc5')}}</div>
              <div class="flex tar c-999">
                {{item.totalAchievement}} 
                <!-- {{item.coinName}} -->
              </div>
            </li>
            <li class="db">
              <div class="name">{{$t("doc.doc27")}}</div>
              <div class="flex tar c-999">
                {{item.todayRewardAmount}} 
                <!-- {{item.coinName}} -->
              </div>
            </li>

            <li class="db" style="margin-top: .1rem;">
              <div class="name">{{ $t("doc.doc28") }}</div>
              <div class="flex tar c-999" >
                <span>{{item.sumTradeAmount}}</span>
              </div>
            </li>


<!--            <li class="db">-->
<!--              <div class="name">{{$t('doc.doc6')}}</div>-->
<!--              <div class="flex tar c-999" @click.stop="hind_edit(item.userId,item.rebateRatio,k,2)">-->
<!--                <span>{{item.quantifyRebateRatio}}%</span> <img src="../../assets/images/ico_edit.png" alt="">-->
<!--              </div>-->
<!--            </li>-->

<!--            <li class="db" style="margin-top: .1rem;">-->
<!--              <div class="name">返佣比例</div>-->
<!--              <div class="flex tar c-999" @click.stop="hind_edit(item.userId,item.rebateRatio,k,1)">-->
<!--                <span>{{item.rebateRatio}}%</span> <img src="../../assets/images/ico_edit.png" alt="">-->
<!--              </div>-->
<!--            </li>-->


          </ul>
          <ul>
            <li class="db">
              <div class="name c-999"><img src="../../assets/images/i_name.png" alt="">{{item.teamCount}} {{$tc('income.doc29',2)}}</div>
              <div class="flex tar c-red">
                <img :src="item.coinIcon" alt="">{{item.totalAchievement}} 
                <!-- {{item.coinName}} -->
              </div>
            </li>
          </ul>
        </div>
        </van-list>
      </div>

      <div class="rel" v-else>
        <div class="empty">
          <img src="../../assets/images/none2.png" alt="">
          <span class="c-999">{{$t('toast.no_data')}}</span>
        </div>
      </div>

      <van-popup v-model="show1" style="background: none;">
        <div class="ra_box">
          <div class="tit">{{$t('doc.doc7')}}</div>
          <div class="p">
            {{message}}
          </div>
          <button @click="show1 = false">{{$t('doc.doc8')}}</button>
        </div>
      </van-popup>

      <van-popup v-model="show2" style="background: none;">
        <div class="ra_box">
          <div class="tit">{{$t('doc.doc9')}}</div>
          <ul class="wrap bet">
            <li v-for="(item,k) in ralist" :key="k" @click="hind_radio(item.cid,k)" :class="{on:cindex==k}"><span>{{item.cid}}%</span></li>
          </ul>
          <div class="p2">
            <div class="t">{{$t('doc.doc10')}}</div>
            <p>{{$t('doc.doc11')}}</p>
            <p>{{$t('doc.doc12')}}</p>
            <p>{{$t('doc.doc13')}}</p>
          </div>
          <ul class="db">
            <li><button class="s" @click="show2 = false">{{$t('doc.doc14')}}</button></li>
            <li><button @click="hind_submit()">{{$t('doc.doc15')}}</button></li>
          </ul>
        </div>
      </van-popup>




    </div>
</template>
<script>


  export default {
  data(){
    return {
      it:0,
      if_check:false,
      titleSize:this.$t('title.team'),
      is_mt:true,
      datainfo:[],
      show1:false,
      show2:false,
      rebateRatio:'',
      userId2:'',
      ralist:[],
      message:'',
      cindex:'100',
      k:'',

      page: 0,
      teamID: [], //存放展开id
      curUid: this.$route.query.userId, //当前id
      isHasList: true,
      totalPage: "",
      pageSize: 10,
      loading: false,
      finished: false,
      refreshing: false,
      emptyShow:false,
      lastId:'',
      type:''

    }
  },
    // require
    created() {
      // this.getinfo()
    },
    watch: {
      '$route' () {
        this.page = 0;
        this.totalPage = "";
        this.datainfo = [];
        this.lastId = '';
        this.pageIndex = undefined;
        this.finished = false;
        this.datalists(this.$route.query.userId);

      },
      curUid(newValue, oldValue) {
          this.page = 0;
          this.totalPage = "";
          this.datainfo = [];
          this.pageIndex = undefined;
          this.finished = false;
          this.datalists(this.curUid);
      },
      datainfo(newValue, oldValue) {
        if (newValue.length == 0) {
          this.isHasList = false;
        }else{
          this.isHasList = true;
        }
      },
    },
    mounted() {

    },
    methods: {
      // getinfo(){
      //   this.$post(this.URL.income.team,{
      //     userId:this.userId
      //   }).then((res) => {
      //     if (res.code == 0) {
      //       this.datainfo = res.data;
      //     }
      //   });
      // },
      // handleChangeChildTeam(item) {
      //   if (item.teamCount == 0) return;
      //   this.userId = item.userId;
      //   this.getinfo()
      // },

      handleChangeChildTeam(item) {
        if (item.teamCount == 0) return;
        // this.teamID.push(item.userId);
        // this.lastId = 0

        this.$router.push({
          path: '/income/team',
          query:{
            userId:item.userId,
          }
        });



      },

      handleParentFn() {
        if (this.teamID.length != 0) {
          let idx = this.teamID.length - 1;
          this.teamID.splice(idx, 1);
          this.curUid = this.teamID[this.teamID.length - 1];
        } else {
          this.$router.go(-1);
        }
      },


      datalists(userId){
        let data = {
          userId,
          pageSize:this.pageSize,
          lastId: this.lastId,
        };

        this.$post(this.URL.income.team, {
          ...data,

        }).then((res) => {
          if (res.code == 0) {
            this.totalRechargeAmount = res.data.totalRechargeAmount
            this.loading = false;
            if (0 != res.code) {
              this.finished = true;

              this.page -= 1;
              this.lastId = 0;
              return;
            }
            if(null == res.data){

              this.finished = true;
              return;
            }
            if (!this.common.isArray(res.data.list)) {
              this.finished = true;
              return;
            }


            this.totalAmount = res.data.totalAmount;
            this.totalRecordCount = res.data.page.count;
            this.totalPage = res.data.page.totalPage;
            this.pageIndex = res.data.page.index;
            let initData = res.data.list;

            // 最后一条数据的id，用于下一次请求，服务器给的新分页请求方法
            let endItem = initData[initData.length -1];

            if(endItem != undefined){
              this.lastId = endItem.id;
            }


            if (this.isEmptyList) {
              this.datainfo = [];
            }

            this.datainfo.push(...initData);
            this.isEmptyList = false;

            // if (this.dataList.length >= res.data.page.count) {
            //   this.finished = true;
            //   return;
            // }
            if (res.data.list.length < this.pageSize) {
              this.finished = true;
              return;
            }
          } else {
            this.$toast(res.message);
          }
        });
      },


      onLoad() {
        this.datalists(this.$route.query.userId);
      },

      hind_edit(uid,rid,k,type){
        this.userId2 = uid
        this.k = k
        this.type = type

          this.hind_ralist()
        // if(rid == 0){
        //   this.show1 = true
        // }else{
        //   this.show2 = true
        //   this.hind_ralist()
        // }
      },
      hind_ralist() {
        this.ralist = []
        this.$post(this.URL.income.config,{
            userId:this.userId2,
            type:this.type
          }).then((res) => {
            if (res.code == 0) {
              for (var i in res.data) {
                this.ralist.push({
                  cid:res.data[i],
                  status:false
                });
              }

              this.show2 = true
            }else {
              this.show1 = true
              this.message = res.message
            }
          });
      },
      hind_submit() {
        this.$post(this.URL.income.rebate,{
          userId:this.userId2,
          rebateRatio:this.rebateRatio,
          type:this.type
        }).then((res) => {
          this.show2 = false
          if (res.code == 0) {
            this.$toast(res.message);
            this.datainfo[this.k].rebateRatio = res.data.rebateRatio
          }else{
            this.$toast(res.message);
          }
        });
      },
      hind_radio(cid,k){
       this.rebateRatio = cid;
       this.cindex = k

      }


    },


}

</script>


<style lang="less" scoped>
  #app {
    .container {
      padding: 0 .2rem .4rem .2rem;
    }
    .item {
      padding: 0 .2rem;
      .head {
        padding: .3rem 0;
        .photo {
          width: .88rem;
          height: .88rem;
          background:url('../../assets/images/ico_photo.png')center no-repeat;
          background-size: 100% 100%;
           border-radius: .88rem;
          margin-right: .2rem;
          img {
            width: .88rem;
          height: .88rem;
            border-radius: .88rem;
          object-fit: cover;
          }
        }
        .id {
          font-size: .26rem;
          font-weight: 500;
          color: #222222;
          span {
            color: #222;
            margin-left: .1rem;
          }
        }
        .time {
          font-size: .22rem;
        }
      }
      ul {
        border-top: .02rem solid #ececec;
        li {
          img {
            vertical-align: middle;
            height: .22rem;
          }
        }
      }
      ul:nth-child(2) {
        padding: .2rem 0;
        font-size: .24rem;
        li {
          line-height: .4rem;
        }
      }
      ul:nth-child(3) {
        padding: .24rem 0;
        font-size: .26rem;
        img {
          margin-right: .1rem;
        }
        .name {
          img {
            height: .28rem;
          }
        }
        .flex {
          img {
            height: .36rem;
          }
        }
      }
    }

    .ra_box {
      width: 5.8rem;
      background: #ffffff;
      border-radius: .12rem;
      padding: .38rem;
      .tit {
        text-align: center;
        font-size: .4rem;
        font-weight: 600;
        color: #222222;
        line-height: .4rem;
      }
      .p {
        font-size: .32rem;
        font-weight: 400;
        color: #333333;
        text-align: center;
        line-height: .44rem;
        padding: .4rem 0;
      }

      .p2 {
        padding: .3rem 0;
        .t {
          margin-bottom: .1rem;
        }
        p {
          font-size: .24rem;
          color: #666666;
        }
      }

      .db {
        margin: 0 -.1rem;
        li {
          margin: 0 .1rem;
        }
        .s {
          border:.02rem solid #c6ced4;
          color: #2A64E4;background: none;
        }
      }
      .wrap {
        margin: .3rem -.1rem -.1rem -.1rem;
        -webkit-justify-content:flex-start;
        li {
          width: 33.3333%;
          span {
            display: block;
            text-align: center;
            width: 1.56rem;
            height: .8rem;
            line-height: .8rem;
            background: #ffffff;
            border: .02rem solid #dcdcdc;
            border-radius:.08rem;
            margin: .1rem;
            font-size: .38rem;
          }
          &.on {
            span {
              background-color: rgba(255,255,255,0.00);
              border-color:#2A64E4;
              color: rgba(255,85,87,1);
            }
          }
        }
      }

      button {
        width: 100%;
        height: .76rem;
        background: #2A64E4;
        border-radius: .12rem;
        color: #fff;
        font-size: .28rem;border:0
      }
    }
  }
</style>
